<template>
  <div class="about">
     <div class="tableBox">
        <el-table
                    v-loading="loading"
                    :data="gridData"
              
                    highlight-current-row
                    :header-cell-style="{background:'#DADDE9',color:'#000',height:'34px'}"
                    
                >
                    <!-- <el-table-column
                        label="序号"
                        prop="ID"
                        align="center"
                        sortable
                        :v-if="false"
                    /> -->
                    <el-table-column
                        label="区块编号"
                        :show-overflow-tooltip="true"
                        prop="blockId"
                        align="center"
                        width="220"
                    /> 
                    <el-table-column
                        label="区块名称"
                        :show-overflow-tooltip="true"
                        prop="blockName"
                        align="center"
                        width="220"
                    />   
                    <el-table-column
                        label="创建用户"
                        prop="createBy"
                        :show-overflow-tooltip="true"
                        align="center"
                        width="150"
                    />

                    <el-table-column
                    label="处理状态"
                    prop="bstatus"
                    align="center"
                    width="250"
                    >
                        <template slot-scope="scope">
                            <span class="deal-state" :class="scope.row.bstatus=='W'?'not-finish':'finish'">{{ dealState(scope.row.bstatus) }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        label="处理状态"
                        :show-overflow-tooltip="true"
                        prop="bstatus"
                        align="center"
                        width="220"
                    /> -->
                    <el-table-column
                        label="异常数量"
                        :show-overflow-tooltip="true"
                        prop="abnormalNum"
                        align="center"
                        width="220"
                    /> 
                    <el-table-column
                        label="时间"
                        :show-overflow-tooltip="true"
                        prop="createTime"
                        align="center"
                        width="220"
                    /> 
                    <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                @click.stop="handleShow(scope.row)"
                            >查看详情</el-button>
                        </template>
                    </el-table-column>  
                </el-table>
     </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      loading:false
    }
  },
  mounted() {
    if(this.gridData.length==0){
      this.$store.dispatch('getGirdData',this.zoneId)
    }
  },
  computed:{
    gridData(){
      // console.log(this.$store.getters.gridData)
      return this.$store.getters.gridData
    },
    zoneId(){
      return this.$store.getters.zoneId
    }
  },
  methods: {
    //点击查看异常详情
    handleShow(row){
      if(typeof jsToNative=="function"){
          jsToNative('EnterBlockAnalyze',row.blockId)
        }
    },
    //处理状态
    dealState(state){
      if (state =="W") {
        return '未处理'
      }
      else{
        return '已处理'
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.about{
  box-sizing: border-box;
  background: #EDEFF4;
  height: 95vh;
  padding: 15px;
  .tableBox{
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    height: 100%;
    padding: 25px 20px;
  }
}
.deal-state{
  font-size: 10px;
  color: white;
  padding: 3px;
  border-radius: 2px;
}
.not-finish{
  background: #FF9A59;
}
.finish{
  background: #62D566;
}
</style>
